iT邦幫忙

5

30天掌握Sass語法 - (13)如何使用sublime text 2 打造撰寫Sass環境

  • 分享至 

  • xImage
  •  

Sublime text 2 網站連結:
http://www.sublimetext.com/2

首先Sublime text 2是沒有提供Sass、Scss語法高亮的,
所以你必須先安裝 Package Control後才能安裝支援Sass與Scss的插件。
Package Control的安裝流程可以瀏覽此連結:
http://docs.sublimetext.tw/package-and-plugin/
這個網站是國內的程式同好撰寫的文章,內容相當實用,所以如果想學sublime text 2編輯的話也大推。

安裝完後,請透過Package Control安裝Sass、Scss、emmet這幾個插件,
Sass、Scss則是語法高亮的支援,
另外emmet則是能夠快速撰寫HTML、CSS的插件,
能夠加速提升撰寫程式碼的效率,
這裡也附上插件介紹連結,裡面也有許多影片教導使用:
http://docs.emmet.io/

安裝好環境後,
就可以開始寫Sass嘍,
我撰寫Sass的常用熱鍵如下:

Ctrl+L 選擇單行
Ctrl+{ 向左推進
Ctrl+} 向右推進

Sublime text 2 網站連結:
http://www.sublimetext.com/2

首先Sublime text 2是沒有提供Sass、Scss語法高亮的,
所以你必須先安裝 Package Control後才能安裝支援Sass與Scss的插件。
Package Control的安裝流程可以瀏覽此連結:
http://docs.sublimetext.tw/package-and-plugin/
這個網站是國內的程式同好撰寫的文章,內容相當實用,所以如果想學sublime text 2編輯的話也大推。

安裝完後,請透過Package Control安裝Sass、Scss、emmet這幾個插件,
Sass、Scss則是語法高亮的支援,
另外emmet則是能夠快速撰寫HTML、CSS的插件,
能夠加速提升撰寫程式碼的效率,
這裡也附上插件介紹連結,裡面也有許多影片教導使用:
http://docs.emmet.io/

安裝好環境後,
就可以開始寫Sass嘍,
我撰寫Sass的常用熱鍵如下:

Ctrl+L 選擇單行
Ctrl+{ 向左推進
Ctrl+} 向右推進

由於Sass是透過階層性來去做繼承的,
有的時候有些程式碼我們臨時打算進行模組化,
所以就會把他抽出來為第一層,
這時就可以透過Ctrl+L連續點L將各行選取起來後,
再按Ctrl加左右大括號來進行推動,
如果程式碼很多的話,
你也是可以用滑鼠全選起來後,再用左右大括號來推動

這樣一定會比你一行行來推動還要來得有效率許多

Ctrl+Enter       直接跳下一行
Ctrl+Shift+Enter 直接跳上一行

有的時候我們的游標會在程式碼的中間,
為了到下一行繼續撰寫,
通常我們都會用滑鼠點到最右邊再按Enter,
或者是用鍵盤左、右方向鍵將游標移動到最右方,
但這兩種方法都過於麻煩,所以假使你希望可快速到下一行、上一行,
那就很適合使用這個語法,

Ctrl+R 選擇class位置

有的時候我們撰寫太多CSS時,
如果要修改前面的CODE都必須用滾輪往上面尋找,
這時你就可以用Ctrl+R,它會將所有class列表起來,
並方便你去尋找,是個很方便的熱鍵

這裡也附上操作影片提供大家在安裝環境上可更加地順利:D
Yes


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
pajace2001
iT邦研究生 1 級 ‧ 2013-09-28 22:04:42

沙發
「拍手」
太強了~連 youtube 教學都嵌入~~
由衷的趕到佩服~謝謝

0
bear780610
iT邦新手 5 級 ‧ 2014-06-18 14:45:18

你好,最近在寫sass時遇到一個問題,想請教你
我之前在sublime開雙視窗時,當sass儲存後旁邊的css會自動更新
但今天卻突然不能動了,sass儲存後css檔案不會自動更新 需要使用滑鼠在css檔那裏點一下 他才會更新TAT 不知是否有解決辦法呢?
麻煩你了 謝謝謝謝

我要留言

立即登入留言